import React, {Component} from 'react';
import {Form, Input, Modal, Button, Select} from 'antd';
import '../style.less';
import {FetchAPI} from "../../../utils/fetch-middleware";

const Option = Select.Option;
const FormItem = Form.Item;

@Form.create()
export default class StuentsDetail extends Component {
	state = {
		visible: false,
		currentData: {},
	}

	componentWillMount() {
		if (this.props.visible) {
			this.setDate(this.props.visible, this.props.currentData);
		}
	}

	componentWillReceiveProps(nextProps) {
		if (this.state.visible !== nextProps.visible) {
			this.setDate(nextProps.visible, nextProps.currentData);
		}
	}

    success(message) {
        Modal.success({
            title: '系统提示',
            content: message,
        });
    }

    warning(message) {
        Modal.warning({
            title: '系统提示',
            content: message,
        });
    }

    error() {
        Modal.error({
            title: '系统警告',
            content: '系统内部错误，请联系管理员～',
        });
    }

	setDate = (visible, currentData) => {
		this.setState({
			visible,
			currentData: currentData || {},
		});
	}

    onSave = () => {
        console.log('save');
        this.props.form.validateFieldsAndScroll((err, value) => {
            if (!err) {
                debugger;
                FetchAPI('/api/stuents/update', 'POST', Object.assign(this.state.currentData, value)).then(result => {
                    if(result.code === 'ACM0014'){
                        Modal.success({
                            title: result.code,
                            content: '标记成功～',
                        });
                    } else {
                        Modal.warning({
                            title: result.code,
                            content: result.message,
                        });
                    }

                }, err => {
                    Modal.error({
                        title: 'WRONG',
                        content: '系统内部错误，请联系管理员',
                    });
                });
            }
        });
    }

	handleCancel = () => {
		this.props.handleCancel();
		this.props.form.resetFields();
	}

	render() {
		const {visible, currentData} = this.state;
		const {getFieldDecorator} = this.props.form;
		const formLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 4},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 18},
            },
            style: {
                marginBottom: '8px',
            },
        };
		return (
			<div>
				<Modal
					title="请假信息详情"
					visible={visible}
                    onCancel={this.handleCancel}
                    footer={null}
                    className="detail"
				>
					<Form>
						<FormItem label="姓名" {...formLayout}>
							{getFieldDecorator('name', {
								rules: [{required: true, message: 'must'}],
								initialValue: currentData.name,
							})(
								<Input />
							)}
						</FormItem>
                        <FormItem label="学号" {...formLayout}>
                            {getFieldDecorator('acNo', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.acNo,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="班级" {...formLayout}>
                            {getFieldDecorator('className', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.className,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="假由" {...formLayout}>
                            {getFieldDecorator('cause', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.cause,
                            })(
                                <Input />
                            )}
                        </FormItem>
                        <FormItem label="审批人" {...formLayout}>
                            {getFieldDecorator('approver', {
                                rules: [{required: true, message: 'must'}],
                                initialValue: currentData.approver,
                            })(
                                <Input />
                            )}
                        </FormItem>
						<FormItem className="btn-item">
							<Button onClick={() => this.onSave(currentData)} type="primary">save</Button>
						</FormItem>
					</Form>
				</Modal>
			</div>
		);
	}
}
